<template>
  <view class="qiun-columns">
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
      <view class="qiun-title-dot-light">基本区域图</view>
    </view>
    <view class="qiun-charts">
      <canvas
        canvas-id="canvasArea"
        id="canvasArea"
        class="charts"
        @touchstart="touchArea"
      ></canvas>
    </view>
  </view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
var _self;
var canvaArea = null;

// 渲染数据
let Area = {
	categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
	series: [{
		name: '成交量C',
		data: [35, 20, 25, 37, 4, 120],
		color: '#1890ff'
	}]
}

export default {
  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
    }
  },
  onLoad() {
    _self = this;
    this.cWidth = uni.upx2px(750);
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData() {
      uni.request({
        url: 'data.json',
        data: {
        },
        success: function (res) {
          _self.showArea("canvasArea", Area);
        },
        fail: () => {
          _self.tips = "网络错误，小程序端请检查合法域名";
        },
        complete: () => {
          // 调试完删掉赋值代码
          _self.showArea("canvasArea", Area);
        }
      });
    },
    showArea(canvasId, chartData) {
      canvaArea = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'area',
        fontSize: 11,
        legend: true,
        gridType: 'dash', // 辅助线
        dashLength: 5,
        gridColor: '#1890ff',//辅助线颜色
        dataLabel: false,
        dataPointShape: true,
        horizentalLine: true,//是否显示横向辅助线
        xAxisLabel: true,//是否显示X轴辅助标签
        yAxisLabel: true,//是否显示Y轴辅助标签
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: 'grid',
          gridColor: '#CCCCCC',
          gridType: 'dash',
          dashLength: 8
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          min: 10,
          max: 180,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          area: {
            type: 'straight',
            opacity: 0.2,
            addLine: true,
            width: 2
          }
        }
      });

    },
    touchArea(e) {
      canvaArea.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        }
      });
    }
  }
}
</script>

<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 750upx;
  height: 500upx;
  background-color: #ffffff;
}

.charts {
  width: 750upx;
  height: 500upx;
  background-color: #ffffff;
}
</style>
